<template>
  <nav-bar>
    <template v-slot:default>我的存款</template>
  </nav-bar>
  <div class="detailList">
    <div class="title">
      <p style="color:rgb(169, 164, 164);font-size:18px">存款总额（元）</p>
      <p style="font-size:42px"><small>￥</small>{{ count }}</p>
    </div>
    <div class="detail" v-for="(item, index) in list" :key="index">
      <div class="line1 line">
        <p style="margin-right:auto;font-size:20px">{{ list[index].year }}年</p>
        <p style="font-size:20px">{{ list[index].money }}元</p>
      </div>
      <div class="line2 line">
        <p style="margin-right:auto;font-size:16px">
          {{ list[index].time_end }}到期
        </p>
        <p style="font-size:16px">年利率{{ list[index].rate }}%</p>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import NavBar from "../../components/common/navbar/NavBar.vue";
import { allAccount } from "@/api/account";
import { queryOrders } from "@/api/orders";
import { theProduct } from "@/api/product";
export default {
  components: {
    NavBar,
  },
  setup() {
    const state = reactive({
      list: [],
      count: 0,
      accountList: [],
      ordersList: [],
      tempList: [],
    });
    const initDeposit = async () => {
      let res = await allAccount(localStorage.getItem("userID"));
      console.log(res);
      for (let item of res.data) {
        state.accountList.push(item.id);
      }
      console.log(state.accountList);
      for (let i of state.accountList) {
        res = await queryOrders(i);
        for (let it of res.data) {
          state.ordersList.push(it);
        }
      }
      console.log(state.ordersList);

      for (let ite of state.ordersList) {
        if (ite.is_deal === true && ite.is_pay === true)
          state.tempList.push(ite.product);
      }
      for (let ii of state.tempList) {
        res = await theProduct(ii);
        for (let iit of res.data) {
          state.list.push(iit);
        }
      }

      for (let item of state.list) {
        state.count += item.money;
      }
    };
    initDeposit();
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
.detailList {
  padding: 0 5%;
  padding-bottom: 5%;
  width: 90%;
  margin: 60px auto;
  border: 1px solid #efefef;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 0 8px #fff, 0 5px 13px rgb(0 0 0 / 7%);
}
.title {
  padding-bottom: 10px;
  border-bottom: 5px solid #efefef;
  text-align: center;
  line-height: 48px;
}
.detail {
  margin-top: 20px;
  border-bottom: 2px solid #efefef;
}
.line {
  display: flex;
  line-height: 24px;
  font-size: 20px;
}
.line2 {
  font-size: 12px;
  margin-top: 10px;
}
</style>
